<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_edit.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- 左边 -->
        <div class="nav-left">
            <img src="img/logo2.jpg" alt="">
            <span>我的博客系统</span>
        </div>
        <!-- 右边 -->
        <div class="nav-right">
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
            <a href="logout">注销</a>
        </div>
    </div>
    <!-- 文章编辑区 -->
    <div id="edit-container">
        <!-- 输入标题，发布按钮 -->
        <div id="edit-title">
            <input type="text" id="title" placeholder="在这里写下文章标题">
            <button onclick="articleAdd()">发布文章</button>
        </div>
        <!-- 文章内容 -->
        <div id="edit-content">
            <textarea id="content" style="display: none;"></textarea>
        </div>
    </div>

</body>
<script src="js/jquery.min.js"></script>
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.min.js"></script>
<script src="js/util.js"></script>
<script>
    // 使用jquery框架的$(function(){}), 页面加载完以后，执行函数内的代码
    $(function(){
        var editor = editormd("edit-content", {
            //设置高宽，值和css写法一样
            width: "100%",
            // 高度是父容器edit-container全部高度减去标题50px
            height: "calc(100% - 50px)",
            // 初始化的内容（左边markdown源码）
            markdown: "# 第一篇博客文章",
            // 插件路径
            path: "editor.md/lib/",
            saveHTMLToTextarea: true,
        })
    })

    //获取标题和内容的dom元素
    var title = document.querySelector("input");
    var content = document.querySelector("textarea")
    //绑定发布文章事件：验证标题和内容，不为空，发布（ajax请求）
    function articleAdd(){
        if(!title.value){
            alert("标题不能为空")
            return;
        }
        if(!content.value){
            alert("文章内容不能为空")
            return;
        }
        //验证通过，发请求：提交文章标题和内容，后端做插入文章数据操作
        ajax({
            method: "post",
            url: "blog/add",
            contentType: "application/json",
            body: JSON.stringify({
                title: title.value,
                content: content.value,
            }),
            callback: function(status, responseText){
                var json = handleResponse(status, responseText);
                if(!json) return;
                //解析响应正文json
                if(json.ok){
                    //发布文章成功，简单的提示一下，跳转到主页就行
                    alert("发布成功")
                    location.href = "blog_list.html";
                }
            }
        });
    }
</script>
</html>